<template>
    <div v-loading="loading" class="app-container dialog">
        <div class="title">进出机房</div>
        <div class="Subhead">基本信息</div>
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            label-position="right"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="title">
                <el-input style="width: 760px" v-model="form.title"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="单位审核" prop="unit_audit">
                        <el-radio-group
                            @change="UnitAuditChange"
                            v-model="form.unit_audit"
                        >
                            <el-radio label="true">是</el-radio>
                            <el-radio label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核单位"
                        prop="Auditunit"
                    >
                        <el-cascader
                            :props="{ value: 'id', checkStrictly: true }"
                            :show-all-levels="false"
                            @change="deptChange"
                            v-model="officeId"
                            placeholder="请选择，可搜索"
                            :options="dept"
                            clearable
                            filterable
                        ></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核人员"
                        prop="Auditunit"
                    >
                        <el-select
                            clearable
                            style="width: 200px"
                            v-model="form.audit_person"
                            :placeholder="
                                form.officeId
                                    ? '请选择审核人员'
                                    : '请先选择审核部门'
                            "
                        >
                            <el-option
                                v-for="item in users"
                                :key="item.userName"
                                :label="item.nickName"
                                :value="item.userName"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="Subhead">需求信息</div>
            <el-row>
              <el-col :span="6">
                 <el-form-item label="云服务商:" prop="cloudSupplier">
                     <el-select
                         v-model="cloudSupplier"
                         style="width: 200px"
                         placeholder="请选择云服务商"
                     >
                         <el-option
                             v-for="item in logicListALL"
                             :key="item.roleKey"
                             :label="item.cloudSupplierName"
                             :value="item.roleKey"
                         >
                         </el-option>
                     </el-select>
                 </el-form-item>
              </el-col>
                <el-col :span="6">

                    <el-form-item label="机房名称" prop="machine_room_name">
                        <el-select
                            clearable
                            filterable
                            v-model="form.machine_room_name"
                        >
                            <el-option
                                v-for="item in ComputerRoomNameList"
                                :key="item.dictValue"
                                :label="item.dictValue"
                                :value="item.dictValue"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="进出时间" prop="in_out_time">
                        <el-date-picker
                            v-model="form.in_out_time"
                            type="datetimerange"
                            placeholder="选择日期时间"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right"
                        >
                        </el-date-picker>
                        <!-- <el-date-picker
                        v-model="value1"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="进出原因">
                <editor
                    v-model="form.in_out_reason"
                    style="
                        min-height: 192px;
                        max-height: 400px;
                        overflow-y: auto;
                    "
                    :min-height="192"
                    :max-height="400"
                />
            </el-form-item>
            <div class="tabletitle">
                进出人员明细
                <img
                    style="width: 20px; cursor: pointer; vertical-align: middle"
                    @click="add()"
                    src="../../../assets/icons/add.png"
                    alt=""
                />
            </div>
            <Table :columns="columns" :data="data">
                <template slot-scope="{ row, index }" slot="name">
                    <el-input v-model="data[index].name"></el-input>
                </template>
                <template slot-scope="{ row, index }" slot="IDNumber">
                    <el-input v-model="data[index].IDNumber"></el-input>
                </template>
                <template slot-scope="{ row, index }" slot="Telephone">
                    <el-input v-model="data[index].Telephone"></el-input>
                </template>
                <template slot-scope="{ row, index }" slot="remarks">
                    <Input type="text" v-model="data[index].remarks" />
                </template>

                <template slot-scope="{ row, index }" slot="action">
                    <Button type="error" @click="remove(index)">删除</Button>
                </template>
            </Table>
            <div class="tabletitle" style="margin-top: 30px">
                携带设备明细
                <img
                    style="width: 20px; cursor: pointer; vertical-align: middle"
                    @click="loweradd()"
                    src="../../../assets/icons/add.png"
                    alt=""
                />
            </div>
            <Table :columns="lowercolumns" :data="lowerdata">
                <template slot-scope="{ row, index }" slot="inOut">
                    <el-select
                        clearable
                        filterable
                        v-model="lowerdata[index].inOut"
                    >
                        <el-option
                            v-for="item in inOutList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </template>
                <template slot-scope="{ row, index }" slot="EquipmentType">
                    <el-select
                        clearable
                        filterable
                        v-model="lowerdata[index].EquipmentType"
                    >
                        <el-option
                            v-for="item in EquipmentTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </template>
                <template slot-scope="{ row, index }" slot="brand">
                    <el-input v-model="lowerdata[index].brand"></el-input>
                </template>
                <template slot-scope="{ row, index }" slot="EquipmentModel">
                    <el-input
                        v-model="lowerdata[index].EquipmentModel"
                    ></el-input>
                </template>
                <template slot-scope="{ row, index }" slot="remarks">
                    <Input type="text" v-model="lowerdata[index].remarks" />
                </template>

                <template slot-scope="{ row, index }" slot="action">
                    <Button type="error" @click="lowerremove(index)">删除</Button>
                </template>
            </Table>
            <file-list ref="fileList" :fileList="form.fileList" @changeFileList="changeFileList" @upload="upload"/>
        </el-form>
        <div style="text-align: center; margin-top: 20px; margin-bottom: 20px">
            <el-button type="success" @click="submit"> 提交工单 </el-button>
        </div>
    </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { listUser2 } from "@/api/system/user";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js";
import { getDicts } from "@/api/system/dict/data";
import { logicList } from "@/api/basic/services";
import fileList from "@/components/FileList/index.vue";
export default {
    name: "InOutComputerRoom",
    components: {
        Editor,fileList
    },
    data() {
      var validator = (rule, value, callback,key1,key2,key3,msg) => {
        if (!this.cloudSupplier) {
          callback(new Error('请选择云服务商'));
        } else{
          callback();
        }
      };
        return {
            loading:false,
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
            datetime: "",
            form: {
                machine_room_name:null,
                unit_audit: "false",
                audit_unit: null,
                audit_person: null,
                fileList:[],
            },
            cloudSupplier:'',
            //部门列表树结构
            dept: [],
            //上云系统列表
            xtList: [],
            // 部门id
            officeId: "",
            // 关机时间下拉数组
            ShutDownList: [
                {
                    id: "1",
                    name: "上班时间",
                },
                {
                    id: "2",
                    name: "非上班时间",
                },
                {
                    id: "3",
                    name: "不能关闭",
                },
                {
                    id: "4",
                    name: "其他时间",
                },
            ],
            // 系统状态
            SystemStateList: [
                {
                    id: "1",
                    name: "从系统选择",
                },
                {
                    id: "2",
                    name: "其他",
                },
            ],
            // 操作系统下拉数据
            operatingSystemList: [
                {
                    id: "1",
                    name: "Linux",
                },
                {
                    id: "2",
                    name: "Windows",
                },
            ],
            // 网络环境下拉数据
            networkList: [
                {
                    id: "1",
                    name: "政务外网",
                },
                {
                    id: "2",
                    name: "互联网",
                },
            ],
            // 交互类型
            ExchangeType: [
                {
                    id: "资源池内交互",
                    name: "资源池内交互",
                },
                {
                    id: "跨网交互",
                    name: "跨网交互",
                },
                {
                    id: "其他交互",
                    name: "其他交互",
                },
            ],
            // 交互方式
            InteractionModeList: [
                {
                    id: "协议交互",
                    name: "协议交互",
                },
                {
                    id: "文件交互",
                    name: "文件交互",
                },
                {
                    id: "数据库交互",
                    name: "数据库交互",
                },
            ],
            // 协议下拉数据
            agreementList: [
                {
                    id: "http",
                    name: "http",
                },
                {
                    id: "https",
                    name: "https",
                },
                {
                    id: "ftp",
                    name: "ftp",
                },
                {
                    id: "snmp",
                    name: "snmp",
                },
                {
                    id: "其他",
                    name: "其他",
                },
            ],
            // 交互时间
            InteractionTimeList: [
                {
                    id: "每月",
                    name: "每月",
                },
                {
                    id: "每周",
                    name: "每周",
                },
                {
                    id: "每天",
                    name: "每天",
                },
                {
                    id: "实时",
                    name: "实时",
                },
                {
                    id: "不定期",
                    name: "不定期",
                },
                {
                    id: "其他",
                    name: "其他",
                },
            ],
            rules: {
                title: [
                    { required: true, message: "请输入标题", trigger: "blur" },
                ],
                machine_room_name: [
                    {
                        required: true,
                        message: "请选择机房名称",
                        trigger: "change",
                    },
                ],
                in_out_time: [
                    {
                        required: true,
                        message: "请选择进出时间",
                        trigger: "change",
                    },
                ],
                cloudSupplier:[
                    { required: true,validator: validator, trigger: 'change' },
                ]
            },
            logicListALL: [],
            applicationSystem: null,
            IpType: null,
            PortManage: null,
            port: null,
            portType: null,
            remarks: null,
            columns: [
                {
                    title: "姓名",
                    slot: "name",
                },
                {
                    title: "身份证号",
                    slot: "IDNumber",
                },
                {
                    title: "电话",
                    slot: "Telephone",
                },
                {
                    title: "备注",
                    slot: "remarks",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            lowercolumns: [
                {
                    title: "带出/带入",
                    slot: "inOut",
                },
                {
                    title: "设备类型",
                    slot: "EquipmentType",
                },
                {
                    title: "品牌",
                    slot: "brand",
                },
                {
                    title: "设备型号",
                    slot: "EquipmentModel",
                },
                {
                    title: "备注",
                    slot: "remarks",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            // 机房名称
            ComputerRoomNameList: [
            ],
            inOutList: [
                {
                    id: "带入",
                    name: "带入",
                },
                {
                    id: "带出",
                    name: "带出",
                },
            ],
            EquipmentTypeList: [
                {
                    id: "笔记本",
                    name: "笔记本",
                },
                {
                    id: "服务器",
                    name: "服务器",
                },
                {
                    id: "硬盘",
                    name: "硬盘",
                },
                {
                    id: "其他",
                    name: "其他",
                },
            ],
            data: [],
            lowerdata: [],
            editIndex: -1, // 当前聚焦的输入框的行数
            editapplicationSystem: "",
            editIpType: "",
            editPortManage: "",
            editport: "",
            editportType: "",
            editremarks: "",
            IsUnitAudit: false,
            // 用户数据
            users: [],
        };
    },
    created() {
        getDicts("computer_room").then((response) => {
            this.ComputerRoomNameList = response.data;
        });
        // 获取云服务商列表
        logicList().then((res) => {
            this.logicListALL = res.rows;
        });
        this.GetListSelect();
    },
    methods: {
        changeFileList(fileList){
          this.$set(this.form,'fileList',fileList)
        },
        // 返回上级
        ReturnSuperior(){
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$destroy(this.$options.name)
            this.$router.go(-1)
        },
        getName(data, id) {
            data.forEach((item) => {
                if (item.id == id) {
                    this.form.officeName = item.label;
                } else if (item.children && item.children.length) {
                    this.getName(item.children, id);
                }
            });
        },
        deptChange(e) {
            this.users = [];
            this.form.audit_person = "";
            this.form.audit_unit = "";
            if (e.length) {
                this.form.audit_unit = e[e.length - 1];
                this.getName(this.dept, this.form.audit_unit);
                listUser2({
                    deptId: this.form.audit_unit,
                    pageNum: 1,
                    pageSize: 10000000,
                }).then((response) => {
                    this.users = response.rows;
                });
            }
        },
        UnitAuditChange(e) {
            if (e == "true") {
                this.IsUnitAudit = true;
            } else {
                this.IsUnitAudit = false;
                this.form.audit_unit = null;
                this.form.audit_person = null;
                this.officeId = null;
            }
        },
        GetListSelect() {
            treeselect({}).then((response) => {
                this.dept = response.data;
            });
            AllcloudUpList().then((response) => {
                this.xtList = response.rows;
            });
        },
        DeleteFile(data, index) {
            this.fileList = this.fileList.filter((item) => {
                if (item.uid == data.uid) {
                } else {
                    return item;
                }
            });
        },
        add() {
            let addObj = JSON.parse(
                JSON.stringify({
                    name: "",
                    IDNumber: "",
                    Telephone: "",
                    remarks: "",
                })
            );
            this.data.push(addObj);
        },
        loweradd() {
            let addObj = JSON.parse(
                JSON.stringify({
                    inOut: "带入",
                    EquipmentType: "笔记本",
                    brand: "",
                    EquipmentModel: "",
                    remarks: "",
                    action: "",
                })
            );
            this.lowerdata.push(addObj);
        },
        handleSave(row, index) {
            this.data[index] = row;
        },
        remove(index) {
            this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.data.splice(index, 1);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        lowerremove(index) {
            this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.lowerdata.splice(index, 1);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        submit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    this.loading = true
                    this.$refs.fileList.upload()
                } else {
                    return false;
                }
            });
        },
        //上传文件回调
        upload(files){
          if(files){
                  this.form.in_out_person_detailed = this.data;
                  this.form.portable_equipment_detailed = this.lowerdata;
                  if(Array.isArray(this.form.in_out_time)){
                      this.form.in_out_time = this.form.in_out_time.join(',')
                  }
                  let obj = {
                      files,
                      formData: this.form,
                      variables:{
                          cloudSupplier: this.cloudSupplier,
            deptId: sessionStorage.getItem("deptId"),//当前登录人部门
            deptScope: "UP_CASCADE",//部门范围，向上级联
                      },
                      formDefKey: "inOutMachineRoom",
                      title: this.form.title,
                  };
                  definition("yunwei_jf", obj).then((res) => {
                      if (res.code == 200) {
                          this.$message({
                              message: res.msg,
                              type: "success",
                          });
                          this.form = {};
                          this.form.unit_audit = "false";
                          this.form.audit_unit = null;
                          this.form.audit_person = null;
                          this.ReturnSuperior()
                          this.loading = false
                      }
                  }).catch(err=>{
                      if(!Array.isArray(this.form.in_out_time)){
                          this.form.in_out_time = this.form.in_out_time.split(',')
                          this.loading = false
                      }
                  })
          }else{
            this.loading = false
          }
        },
    },
};
</script>

<style scoped lang="scss">
.dialog {
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .Subhead {
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 2px solid #38b3aa;
    }
    .tabletitle {
        width: 100%;
        text-align: center;
        font-weight: bold;
        border: 1px solid rgb(248, 248, 249);
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }
}
</style>
